<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
</head>
<body>

<canvas id="physics-diagram" width="500" height="450"></canvas>

<script>
    const canvas = document.getElementById('physics-diagram');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '20px serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const cx = 250;
    const cy = 210;
    const r = 120;

    // Helper function to draw a line with an arrowhead
    function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);

        // Draw the line
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.stroke();

        // Draw the filled arrowhead
        ctx.beginPath();
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fill();
    }

    // 1. Draw Vertical Axis of Rotation
    ctx.beginPath();
    ctx.moveTo(cx, cy - r - 50);
    ctx.lineTo(cx, cy + r + 50);
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.lineWidth = 1.5;


    // 2. Draw Magnetic Field (B) Lines
    const bFieldXStart = 50;
    const bFieldXEnd = 450;
    const bFieldSpacing = 55;
    for (let i = -2; i <= 2; i++) {
        const y = cy + i * bFieldSpacing;
        drawArrow(ctx, bFieldXStart, y, bFieldXEnd, y, 10);
    }

    // Label B
    ctx.font = 'italic bold 24px serif';
    ctx.fillText('B', bFieldXEnd - 15, cy + 30);


    // 3. Draw Circle (Ring)
    ctx.beginPath();
    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.lineWidth = 1.5;


    // 4. Draw Rotation Symbol (ω)
    const omegaAxisTop = { x: cx, y: cy - r };
    const omegaAxisStemTop = {x: cx, y: cy - r - 15};
    // Stem
    ctx.beginPath();
    ctx.moveTo(omegaAxisTop.x, omegaAxisTop.y);
    ctx.lineTo(omegaAxisStemTop.x, omegaAxisStemTop.y);
    ctx.stroke();
    
    // Curved arrow for rotation using a quadratic curve
    const arcStartX = cx + 20;
    const arcStartY = cy - r - 15;
    const arcEndX = cx - 20;
    const arcEndY = cy - r - 15;
    const controlX = cx;
    const controlY = cy - r - 40;
    
    ctx.beginPath();
    ctx.moveTo(arcStartX, arcStartY);
    ctx.quadraticCurveTo(controlX, controlY, arcEndX, arcEndY);
    ctx.stroke();

    // Arrowhead for the curve
    const headlen = 8;
    const dx_c = arcEndX - controlX;
    const dy_c = arcEndY - controlY;
    const angle_c = Math.atan2(dy_c, dx_c);

    ctx.beginPath();
    ctx.moveTo(arcEndX, arcEndY);
    ctx.lineTo(arcEndX - headlen * Math.cos(angle_c - Math.PI / 6), arcEndY - headlen * Math.sin(angle_c - Math.PI / 6));
    ctx.lineTo(arcEndX - headlen * Math.cos(angle_c + Math.PI / 6), arcEndY - headlen * Math.sin(angle_c + Math.PI / 6));
    ctx.closePath();
    ctx.fill();

    // Label ω
    ctx.font = 'italic 24px serif';
    ctx.fillText('ω', cx + 35, cy - r - 25);
    

    // 5. Draw and label points
    function drawPoint(x, y, label, dx, dy) {
        ctx.beginPath();
        ctx.arc(x, y, 3, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = 'italic 20px serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x + dx, y + dy);
    }

    drawPoint(cx, cy - r, 'b', 8, 0); // Point b
    drawPoint(cx + r, cy, 'c', 8, 5); // Point c
    
    // Point d (at approx 30 degrees from horizontal)
    const angle_d_rad = 30 * Math.PI / 180;
    const x_d = cx + r * Math.cos(angle_d_rad);
    const y_d = cy - r * Math.sin(angle_d_rad);
    drawPoint(x_d, y_d, 'd', 8, -8);

    // Label O
    ctx.font = 'italic 20px serif';
    ctx.textAlign = 'center';
    ctx.fillText('O', cx - 15, cy + 15);

    // 6. Draw Caption
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('习题 9-8 图', cx, cy + r + 60);

</script>

</body>
</html>